<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '商品详情',
  },
}
</route>

<script lang="ts" setup>
import type { ScrollViewOnScrollEvent } from '@uni-helper/uni-types/index'
import type { GoodsResponseDto } from '@/service/app'
import { onShareAppMessage } from '@dcloudio/uni-app' // 导入分享生命周期
import { debounce, get } from 'lodash'
import { BASE_URL } from '@/constants'
import { posterControllerCreateGoodsPoster as createGoodsPoster, goodsControllerFindOne as getGood, posterControllerGetQrCode as getSun } from '@/service/app'
// 引入缺省组件
import DefaultPlaceholder from '../../components/default-placeholder/index.vue'

// 定义 detail 并初始化
const detail = ref<{ id: string } | null>(null)
// 控制导航条显示状态
const showNav = ref(false)
// 模拟一个异步获取数据的函数
async function fetchDetail(query: any) {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 这里可以根据实际情况从 API 获取数据
      resolve({ id: query.id || '默认 ID' })
    }, 1000) // 模拟 1 秒的延迟
  })
}

const goodInfo = ref<GoodsResponseDto>()

const backImg = ref('')
// 跟踪当前选中的规格
const currentSpec = ref<any>(null)
// 轮播图图片列表（当前规格的封面图数组）
const lunboList = ref<string[]>(['https://m.360buyimg.com/i/jfs/t1/313743/2/14529/72956/686777b3F541a188c/1017aab5a87a3f64.jpg'])
// 选中的规格索引
const chooseIndex = ref(0)
// 数量
const value = ref<number>(1)
// 记录初始单价
const initialPrice = ref(0)

const current = ref(0)

// 使用 async/await 处理异步操作
onLoad(async (query) => {
  try {
    const { data } = await getGood({ params: { id: query.id } })
    goodInfo.value = data
    // 初始化规格数据（默认选中第一个规格）
    if (goodInfo.value?.specification && goodInfo.value.specification.length > 0) {
      chooseIndex.value = 0 // 默认选中第一个规格
      currentSpec.value = goodInfo.value.specification[0] // 绑定当前规格
      // 初始化轮播图（拼接完整图片URL）
      lunboList.value = currentSpec.value.cover.map(url => BASE_URL + url)
      // 初始化封面图和价格
      backImg.value = lunboList.value[0] // 轮播图首图
      initialPrice.value = currentSpec.value.price // 初始单价
      value.value = 1 // 重置数量
    }
    console.log(goodInfo.value)
  }
  catch (error) {
    console.error('获取商品详情失败:', error)
  }
})

// 处理滚动事件
const scrollTop = ref(0)

function back() {
  uni.navigateBack()
}

const handleScroll = debounce((e: ScrollViewOnScrollEvent) => {
  scrollTop.value = e.detail.scrollTop
}, 30)

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
const systemInfo = uni.getWindowInfo()
const top = systemInfo.safeArea?.top ?? null
// #endif

// 替换为实际的电话号码
const phoneNumber = ref('12345678901')

// 替换为实际的位置信息
const location = ref({
  latitude: 30.835049, // 纬度，请替换为实际值
  longitude: 120.78460, // 经度，请替换为实际值
  name: '油车港镇', // 位置名称
  address: '浙江省嘉兴市秀洲区', // 详细地址
})

// 拨打电话函数
function makePhoneCall() {
  // 检查平台是否支持打电话功能
  if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
    uni.makePhoneCall({
      phoneNumber: phoneNumber.value,
      success: () => {
        console.log('电话拨打成功')
      },
      fail: (err) => {
        console.error('电话拨打失败', err)
        uni.showToast({
          title: '无法拨打该号码',
          icon: 'none',
        })
      },
    })
  }
  else {
    uni.showToast({
      title: '当前平台不支持此功能',
      icon: 'none',
    })
  }
}

// 导航函数
function navigate() {
  // 检查平台是否支持打开地图
  if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
    // 使用微信小程序的 openLocation 接口
    uni.openLocation({
      latitude: location.value.latitude,
      longitude: location.value.longitude,
      name: location.value.name,
      address: location.value.address,
      success: () => {
        console.log('导航成功')
      },
      fail: (err) => {
        console.error('导航失败', err)
        uni.showToast({
          title: '无法打开地图应用',
          icon: 'none',
        })
      },
    })
  }
  else {
    uni.showToast({
      title: '当前平台不支持此功能',
      icon: 'none',
    })
  }
}

// 优惠券弹出
function getCoupon() {
  uni.showToast({
    title: '优惠券弹出',
    icon: 'none',
  })
}

const show = ref(false)

// 打开弹出层
function showPop() {
  show.value = true
}
// 关闭弹出层
function closePop() {
  show.value = false
}

// 分享层原始状态
const showShare = ref(false)

// 打开分享
function openShare() {
  showShare.value = true
}

// 关闭分享
function closeShare() {
  showShare.value = false
}

// 计数器
function handleChange({ value }) {
  console.log(value)
  // 计算新的总价
  // info.price = initialPrice.value * value
}

// 加入购物车
function addCart() {
  if (!currentSpec.value) {
    uni.showToast({
      title: '请选择商品规格',
      icon: 'none',
    })
  }
}

// 去支付
function goPay() {

}

// 规格选择逻辑
function handleChoose(index: number) {
  // 记录选中的规格索引
  chooseIndex.value = index
  // 获取选中的规格数据
  const selectedSpec = goodInfo.value?.specification[index]
  if (!selectedSpec)
    return

  // 更新当前选中的规格
  currentSpec.value = selectedSpec
  // 更新轮播图（显示当前规格的封面图）
  lunboList.value = selectedSpec.cover.map(url => BASE_URL + url)
  // 更新顶部封面图
  backImg.value = lunboList.value[0]
  // 更新价格（当前规格的单价）
  initialPrice.value = selectedSpec.price
  // 重置数量为1
  value.value = 1
  // 更新显示的总价
  // info.price = selectedSpec.price
}

// 底部左侧icon
const quickList = ref([
  {
    name: 'bags',
    text: '首页',
    url: '/pages/index/index',
  },
  {
    name: 'service',
    text: '客服',
    url: '/pages/mine/contactKefu',
  },
  {
    name: 'cart',
    text: '购物车',
    url: '/pages/goods/shoppingCart',
  },
])

function goQuick(url) {
  if (url === '/pages/mine/contactKefu') {
    uni.navigateTo({
      url,
    })
  }
  else {
    uni.switchTab({
      url,
    })
  }
}

// 模拟数据结构，用于模板中的静态属性（如样式、布局等）
const info = {
  title: '', // 动态获取
  order: 'xx之家 => xx茶苑',
  location: 'xx华服（xx之家店）',
  comment: '',
  price: 0, // 动态获取
}

function shareWx() {
  uni.showToast({
    title: '分享成功',
    icon: 'none',
  })
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    type: 0,
    href: 'http://uniapp.dcloud.io/',
    title: 'uni-app分享',
    summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
    imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
    success(res) {
      console.log(`success:${JSON.stringify(res)}`)
    },
    fail(err) {
      console.log(`fail:${JSON.stringify(err)}`)
    },
  })
}

// 微信小程序分享配置
onShareAppMessage(() => {
  // 分享的标题、路径、图片等信息（可动态获取当前商品数据）
  return {
    title: currentSpec.value?.title || '商品详情', // 优先使用当前选中规格的标题
    path: `/pages/goods/detail?id=${detail.value?.id}`, // 分享路径（带当前商品ID，确保跳转正确）
    imageUrl: currentSpec.value?.cover?.[0] ? `${BASE_URL}${currentSpec.value.cover[0]}` : 'https://默认图片地址.png', // 分享图片（优先用当前规格的封面）
    success() {
      uni.showToast({ title: '分享成功', icon: 'none' })
    },
    fail() {
      console.error('分享失败')
      uni.showToast({ title: '分享失败', icon: 'none' })
    },
  }
})

// 存储小程序码的base64数据
const qrcodeBase64 = ref('')
// 控制小程序码模态框显示
const showQrcodeModal = ref(false)
// 存储小程序码图片路径
const qrcodePath = ref('')

async function showQrcode() {
  try {
    uni.showLoading({ title: '生成中...' })

    const response = await getSun({
      params: {
        page: 'pages/goods/detail',
        goodsId: goodInfo.value?.id,
        goodsSpecId: currentSpec.value?.id,
      },
    })

    // 获取返回的数据（假设是base64字符串）
    const imageBase64 = (response.data as unknown) as string

    if (!imageBase64) {
      throw new Error('未获取到小程序码')
    }

    // 处理base64数据
    if (imageBase64.startsWith('data:image')) {
      // 如果是完整的data URL格式，需要提取base64部分
      const base64Data = imageBase64.split(',')[1]
      showQrcodeInModal(base64Data)
    }
    else {
      // 如果只是纯base64字符串
      showQrcodeInModal(imageBase64)
    }
  }
  catch (error) {
    console.error('生成小程序码失败:', error)
    uni.showToast({ title: '生成失败', icon: 'error' })
  }
  finally {
    uni.hideLoading()
  }
}

// 在模态框中显示小程序码
function showQrcodeInModal(base64Data) {
  // 为小程序码创建专用临时文件路径
  const filePath = `${(uni as any).env.USER_DATA_PATH}/qrcode_temp.png`

  // 将base64转为临时文件
  const fs = uni.getFileSystemManager()
  fs.writeFile({
    filePath,
    data: uni.base64ToArrayBuffer(base64Data),
    encoding: 'binary',
    success: () => {
      // 设置小程序码路径并显示模态框
      qrcodePath.value = filePath
      showQrcodeModal.value = true
    },
    fail: (err) => {
      console.error('写入文件失败:', err)
      uni.showToast({ title: '生成失败', icon: 'error' })
    },
  })
}

// 保存小程序码到相册
function saveQrcodeToAlbum() {
  saveImageToAlbum(qrcodePath.value, '小程序码已保存到相册')
}

// 关闭小程序码模态框
function closeQrcodeModal() {
  showQrcodeModal.value = false
}

// 存储海报的base64数据
const posterBase64 = ref('')
// 控制海报模态框显示
const showPosterModal = ref(false)
// 存储海报图片路径
const posterPath = ref('')

async function showPoster() {
  try {
    uni.showLoading({ title: '生成中...' })

    // 调用接口获取海报，需要传入goodsSpecId参数
    const response = await createGoodsPoster({
      params: {
        goodsSpecId: currentSpec.value?.id,
      },
    })

    // 获取返回的数据（假设是base64字符串）
    const imageBase64 = (response.data as unknown) as string

    if (!imageBase64) {
      throw new Error('未获取到推广海报')
    }

    // 处理base64数据
    if (imageBase64.startsWith('data:image')) {
      // 如果是完整的data URL格式，需要提取base64部分
      const base64Data = imageBase64.split(',')[1]
      showPosterInModal(base64Data)
    }
    else {
      // 如果只是纯base64字符串
      showPosterInModal(imageBase64)
    }
  }
  catch (error) {
    console.error('生成推广海报失败:', error)
    uni.showToast({ title: '生成失败', icon: 'error' })
  }
  finally {
    uni.hideLoading()
  }
}

// 在模态框中显示海报
function showPosterInModal(base64Data) {
  // 为推广海报创建专用临时文件路径
  const filePath = `${(uni as any).env.USER_DATA_PATH}/poster_temp.png` // 使用不同的文件名

  // 将base64转为临时文件
  const fs = uni.getFileSystemManager()
  fs.writeFile({
    filePath,
    data: uni.base64ToArrayBuffer(base64Data),
    encoding: 'binary',
    success: () => {
      // 设置海报路径并显示模态框
      posterPath.value = filePath
      showPosterModal.value = true
    },
    fail: (err) => {
      console.error('写入文件失败:', err)
      uni.showToast({ title: '生成失败', icon: 'error' })
    },
  })
}

// 保存海报到相册
function savePosterToAlbum() {
  saveImageToAlbum(posterPath.value, '海报已保存到相册')
}

// 关闭海报模态框
function closePosterModal() {
  showPosterModal.value = false
}

// 通用的保存图片到相册函数
function saveImageToAlbum(filePath, successMsg = '图片已保存到相册') {
  if (!filePath) {
    uni.showToast({ title: '没有可保存的图片', icon: 'none' })
    return
  }

  // 获取保存到相册的权限
  uni.authorize({
    scope: 'scope.writePhotosAlbum',
    success() {
      // 已获得授权，保存图片
      uni.saveImageToPhotosAlbum({
        filePath,
        success: () => {
          uni.showToast({ title: successMsg, icon: 'none' })
        },
        fail: (err) => {
          console.error('保存失败:', err)
          if (err.errMsg.includes('auth deny')) {
            uni.showModal({
              title: '提示',
              content: '需要您授权保存图片到相册',
              confirmText: '去授权',
              success: (res) => {
                if (res.confirm) {
                  // 打开设置页面让用户手动授权
                  uni.openSetting({
                    success: (settingRes) => {
                      console.log('设置页面返回：', settingRes)
                    },
                  })
                }
              },
            })
          }
          else {
            uni.showToast({ title: '保存失败', icon: 'none' })
          }
        },
      })
    },
    fail() {
      // 用户拒绝授权或首次使用
      uni.showModal({
        title: '提示',
        content: '需要您授权保存图片到相册',
        confirmText: '去授权',
        success: (res) => {
          if (res.confirm) {
            uni.openSetting()
          }
        },
      })
    },
  })
}
</script>

<template>
  <!-- 导航栏 -->
  <div
    class="fixed left-0 right-0 z-20 bg-white transition-all duration-300" :class="{
      'shadow-md translate-y-0': scrollTop > 50 + top,
      'shadow-none -translate-y-full': scrollTop <= 50 + top,
    }" :style="{
      top: scrollTop > 50 + top ? 0 : `${-50}px`,
      paddingTop: `${top}px`,
    }"
  >
    <div class="h-11 flex items-center bg-white px-4">
      <wd-icon name="thin-arrow-left" size="22px" @click="back" />
      <h1 class="flex-1 truncate px-6 text-lg text-gray-800 font-medium">
        {{ currentSpec?.title || '商品详情' }}
      </h1>
    </div>
  </div>

  <scroll-view class="h-300 bg-[#f4f4f4]" scroll-y @scroll="handleScroll">
    <!-- 内容区域，确保内容足够长以触发滚动 -->
    <!-- 背景图（使用当前规格的轮播图） -->
    <wd-swiper
      v-if="lunboList.length > 0"
      v-model:current="current"
      :indicator="{ type: 'fraction' } as any"
      height="800rpx"
      indicator-position="bottom-right"
      :list="lunboList"
      :autoplay="false"
    />
    <!-- 当没有轮播图时显示占位图 -->
    <view v-else class="h-800rpx flex items-center justify-center bg-gray-100">
      <text class="text-gray-400">
        加载中...
      </text>
    </view>
    <view class="relative z-5 mt-[-10rpx] bg-#f4f4f4 px-2 py-3">
      <!-- 头部区域 -->
      <view class="rounded-xl bg-white px-[10rpx] py-[40rpx] shadow-sm">
        <view class="items-left flex flex-col px-4 tracking-[-0.05em]">
          <view class="flex justify-between">
            <view class="text-[30rpx]">
              到手价
              <text class="text-[40rpx] font-bold">
                ￥{{ currentSpec?.price.toFixed(2) || 0 }}
              </text>
              <!-- 仅在有折扣时显示原价 -->
              <text v-if="currentSpec?.isDiscount" class="text-[26rpx] text-gray-400 line-through">
                ￥{{ currentSpec?.discountPrice.toFixed(2) }}
              </text>
            </view>
            <wd-icon name="jump" size="22px" @click="openShare" />
          </view>
          <view class="line-clamp-2 my-[20rpx] overflow-hidden break-words text-[40rpx]">
            {{ currentSpec?.title || '商品标题' }}
          </view>
          <view class="flex justify-between text-[24rpx] text-#c43228">
            <view class="rounded-2xl bg-#feede9 px-20rpx py-3rpx">
              新客首单礼-5元优惠券
            </view>
            <view class="font-600" @click="getCoupon">
              领券 <wd-icon name="arrow-right" size="22rpx" />
            </view>
          </view>
        </view>
      </view>

      <!-- 商品信息栏 -->
      <view class="relative z-5 mt-5 rounded-xl bg-white px-4 pb-3 pt-4 text-26rpx">
        <!-- 规格 -->
        <view class="flex">
          <view class="w-80rpx flex-shrink-0 text-gray">
            规格
          </view>
          <view class="line-clamp-1 overflow-hidden break-words">
            {{ currentSpec?.name || '商品规格' }}
          </view>
          <view class="ml-auto w-100rpx flex-shrink-0 text-right text-gray-600" @click="showPop">
            选择 <wd-icon name="arrow-right" size="22rpx" />
          </view>
        </view>
        <view class="mt-20rpx flex items-center gap-15rpx">
          <view
            v-for="(spec) in (goodInfo?.specification || []).slice(0, 3)"
            :key="spec.id"
            class="h-120rpx w-120rpx"
          >
            <image class="h-full w-full rounded-md" :src="spec.cover && spec.cover[0] ? BASE_URL + spec.cover[0] : ''" mode="aspectFill" />
          </view>
          <view class="ml-10rpx rounded-sm bg-#f4f4f4 px-15rpx py-10rpx text-24rpx text-#a4a4a4">
            共有{{ goodInfo?.specification.length }}种规格可选
          </view>
        </view>

        <!-- 服务 -->
        <view class="mt-20rpx flex">
          <view class="w-80rpx flex-shrink-0 text-gray">
            服务
          </view>
          <view class="line-clamp-1 overflow-hidden break-words">
            {{ currentSpec?.description || '商品服务信息' }}
          </view>
        </view>
        <!-- 运费 -->
        <view class="mt-20rpx flex">
          <view class="w-80rpx flex-shrink-0 text-gray">
            运费
          </view>
          <view class="line-clamp-1 overflow-hidden break-words">
            包邮区免邮 , 非包邮区请联系客服
          </view>
        </view>
      </view>

      <!-- 商品详情 -->
      <view class="relative z-5 mt-5 rounded-xl bg-white pb-3 pt-4">
        <view class="flex flex-col px-4">
          <view class="mb-2 text-lg text-gray-800">
            详情
          </view>
          <!-- 使用当前规格的详情图 -->
          <image
            v-if="currentSpec?.detail"
            class="mx-auto w-full" mode="widthFix"
            :src="BASE_URL + currentSpec?.detail"
          />
        </view>
      </view>

      <!-- 商品点评 -->
      <view class="relative z-5 mt-5 bg-white pb-4 pt-4">
        <view class="flex flex-col px-4">
          <view class="mb-2 text-lg text-gray-800">
            点评
          </view>
          <!-- 使用缺省组件 -->
          <DefaultPlaceholder v-if="info.comment.length === 0" text="暂无点评~" />
        </view>
      </view>
    </view>

    <!-- 底部支付栏 -->
    <view class="h-18" />
    <view
      class="fixed bottom-0 z-6 box-border h-20 w-100% flex items-center justify-between rounded-tl-2xl rounded-tr-2xl bg-white p-3"
      style="box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);"
    >
      <view class="flex gap-20rpx text-26rpx">
        <view v-for="item in quickList" :key="item.name" class="flex flex-col items-center" @click="goQuick(item.url)">
          <wd-icon :name="item.name" size="24px" />
          <view class="text-gray">
            {{ item.text }}
          </view>
        </view>
      </view>
      <view class="flex justify-center">
        <view
          class="flex items-center justify-center rounded-bl-lg rounded-tl-lg px-4 py-2 text-[#c1a38c]" style="border: 1rpx solid #ddcab8"
          @click="showPop"
        >
          加入购物车
        </view>
        <view
          class="flex items-center justify-center rounded-br-lg rounded-tr-lg bg-[linear-gradient(to_right,#e0cebd,#bfa189)] px-4 py-2 text-white"
          @click="showPop"
        >
          立即购买
        </view>
      </view>
    </view>

    <!-- 弹出层 -->
    <wd-popup
      v-model="show" lock-scroll :safe-area-inset-bottom="true" position="bottom"
      custom-style="border-radius:32rpx 32rpx 0 0;padding: 40rpx" @close="closePop"
    >
      <view>
        <!-- 弹出层顶部 -->
        <view class="flex">
          <image class="h-200rpx w-200rpx rounded-md" :src="lunboList[0]" mode="aspectFill" />
          <view class="ml-5 flex flex-col justify-between">
            <view class="line-clamp-2 overflow-hidden break-words text-36rpx">
              {{ currentSpec?.title || '商品标题' }}
            </view>
            <view class="mt-1 text-32rpx">
              <view class="text-[30rpx]">
                到手价
                <text class="text-[40rpx] font-bold">
                  ￥{{ currentSpec?.price.toFixed(2) || 0 }}
                </text>
                <!-- 仅在有折扣时显示原价 -->
                <text v-if="currentSpec?.isDiscount" class="text-[26rpx] text-gray-400 line-through">
                  ￥{{ currentSpec?.discountPrice.toFixed(2) }}
                </text>
              </view>
            </view>
          </view>
        </view>

        <!-- 规格列表 -->
        <view class="grid grid-cols-3 mt-3 gap-3">
          <DefaultPlaceholder
            v-if="!goodInfo?.specification || goodInfo.specification.length === 0"
            text="暂无规格数据~"
          />
          <view
            v-for="(spec, index) in goodInfo?.specification"
            :key="spec.id"
            :style="{
              backgroundColor: '#f3f4f6',
              border: index === chooseIndex ? '2rpx solid #000' : 'none',
            }"
            class="flex flex-col items-center justify-center rounded-md text-[25rpx]"
            @click="handleChoose(index)"
          >
            <image class="mb-1 h-150rpx w-full rounded-tl-md rounded-tr-md" :src="spec.cover && spec.cover[0] ? BASE_URL + spec.cover[0] : ''" mode="aspectFill" />
            <view class="h-60rpx flex items-center">
              <view class="line-clamp-2 w-full overflow-hidden break-words px-20rpx text-22rpx">
                {{ spec.name }}
              </view>
            </view>
          </view>
        </view>

        <!-- 商品数量加减槽 -->
        <view class="mb-5 mt-3 w-full flex items-center justify-between">
          <view>数量：</view>
          <wd-input-number v-model="value" @change="handleChange" />
        </view>

        <!-- 弹出层底部确认按钮 -->
        <view class="h-100rpx w-full flex justify-center">
          <view
            class="w-50% flex items-center justify-center rounded-bl-md rounded-tl-md px-4 py-2 text-[#c1a38c]" style="border: 1rpx solid #ddcab8"
            @click="addCart"
          >
            加入购物车
          </view>
          <view
            class="w-50% flex items-center justify-center rounded-br-md rounded-tr-md bg-[linear-gradient(to_right,#e0cebd,#bfa189)] px-4 py-2 text-white"
            @click="goPay"
          >
            立即购买
          </view>
        </view>
      </view>
    </wd-popup>

    <!-- 分享弹出层 -->
    <wd-popup v-model="showShare" lock-scroll :safe-area-inset-bottom="true" position="bottom" custom-style="border-radius:32rpx 32rpx 0 0;padding: 40rpx 0rpx" @close="closeShare">
      <view>
        <view class="mt-10rpx text-center text-36rpx">
          分享到
        </view>
        <view class="my-60rpx flex justify-evenly">
          <!-- 分享弹出层中的微信分享按钮 -->
          <view class="w-120rpx text-center">
            <!-- 注意：必须用 <button> 标签并设置 open-type="share" -->
            <button
              open-type="share"
              style="display: flex;flex-direction: column;align-items: center;background: transparent;
                      border: none;padding: 0;margin: 0;line-height: 1;font-size: inherit;"
            >
              <wd-icon name="image" color="#f5c750" size="80rpx" />
              <view class="mt-5rpx text-26rpx text-gray-500">
                微信
              </view>
            </button>
          </view>
          <view class="w-120rpx text-center" @click="showQrcode">
            <wd-icon name="image" color="#f5c750" size="80rpx" />
            <view class="text-26rpx text-gray-500">
              小程序码
            </view>
          </view>
          <view class="w-120rpx text-center" @click="showPoster">
            <wd-icon name="image" color="#f5c750" size="80rpx" />
            <view class="text-26rpx text-gray-500">
              推广海报
            </view>
          </view>
        </view>
        <view class="h-1rpx bg-gray-200" />
        <view class="mt-30rpx text-center" @click="closeShare">
          取消
        </view>
      </view>
    </wd-popup>

    <!-- 小程序码模态框 -->
    <wd-popup
      v-model="showQrcodeModal"
      position="center"
      custom-style="width: 80%; border-radius: 16rpx; background-color: transparent;"
      @close="closeQrcodeModal"
    >
      <view class="flex flex-col items-center rounded-lg bg-white p-4">
        <view class="mb-4 text-center text-36rpx font-bold">
          小程序码
        </view>
        <image
          v-if="qrcodePath"
          :src="qrcodePath"
          class="mb-4 h-500rpx w-500rpx"
          mode="aspectFit"
          @longpress="saveQrcodeToAlbum"
        />
        <view class="mb-4 text-center text-28rpx text-gray-600">
          长按图片可保存到相册
        </view>
      </view>
    </wd-popup>

    <!-- 推广海报模态框 -->
    <wd-popup
      v-model="showPosterModal"
      position="center"
      custom-style="width: 80%; border-radius: 16rpx; background-color: transparent;"
      @close="closePosterModal"
    >
      <view class="flex flex-col items-center rounded-lg p-4">
        <image
          v-if="posterPath"
          :src="posterPath"
          class="h-700rpx w-500rpx"
          mode="aspectFit"
          @longpress="savePosterToAlbum"
        />
        <view class="text-center text-28rpx text-white">
          长按图片可保存到相册
        </view>
      </view>
    </wd-popup>
  </scroll-view>
</template>

<style lang="scss" scoped>
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-bar {
  height: var(--status-bar-height);
  width: 100%;
}
</style>
